<script>
import {reactive, shallowReactive, ref, shallowRef} from "vue";

export default {
  name: "App",
  setup(props, context) {
    /*
    shallowRef()
      ref() 的浅层作用形式。
      和 ref() 不同，浅层shallowRef 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式,只有对 .value 的访问是响应式的
    */

    //使用shallowRef定义一个浅层的ref
    const state = shallowRef({count: 1})

    const add = () => {
      state.value.count++
    }
    return {
      state,
      add
    }
  }
}
</script>
<template>
  <div class="App">
    <h1>{{ state.count }}</h1>
    <button @click="add">+1</button>
  </div>
</template>

<style lang="less">

</style>
